<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>继承案例</title>
</head>
<body>
    <div class="box1">
        <h1></h1>
    </div>
    <div class="box2">
        <h1></h1>
    </div>
    <script>
        var data1 = {
            title: '体育',
            list: ['体育-1', '体育-2', '体育-3']
        }

        var data2 = {
            title: '综艺',
            url: 'img/苹果.png',
            list: ['综艺-1', '综艺-2', '综艺-3']
        }

        function CreateList(select, data={}){
            this.ele = document.querySelector(select)
            this.title = data.title
            this.list = data.list
        }
        // obj1.__proto__ = CreateList.prototype 对象的__proto__ = 构造函数的prototype
        CreateList.prototype.render = function(){
            var h1 = this.ele.querySelector('h1')
            h1.textContent = this.title
            var ul = document.createElement('ul')
            this.list.forEach(function(item){
                var li = document.createElement('li')
                li.textContent = item
                ul.appendChild(li)
            })
            this.ele.appendChild(ul)
        }
        var obj1 = new CreateList('.box1', data1)
        obj1.render()
        console.log(obj1)
        var obj2 = new CreateImgList('.box2', data2)
        console.log(obj2)

        console.log(obj1.__proto__ === CreateList.prototype) // true
        console.log(obj2.__proto__ === CreateList.prototype) // true

        //原型链
        console.log(obj1.toString()) // [object Object]
        console.log(obj2.toString()) // [object Object]

        CreateImgList.prototype.createImg = function(url){
            var img = document.createElement('img')
            img.src = url
            return img
        }

        function CreateImgList(select, data){
            CreateList.call(this, select, data)
            this.imgUrl = data.url
            this.createImg = function(){
                 var img = document.createElement('img')
                img.src = this.imgUrl 
                return img
            }
        }
        CreateImgList.prototype = new CreateList()
        CreateImgList.prototype.render = function(){
            CreateList.prototype.render.call(this)
            var img = this.createImg(this.imgUrl)
            this.ele.appendChild(img)
        }
        var obj3 = new CreateImgList('.box2', data2)
        obj3.render()
    </script>
</body>
</html>